Parent | Child | Previous | Next
 

Responding to JavaScript Events on an HTML Page

Description

This script demonstrates how you can use Xbasic to respond to events on an HTML page that is hosted in an Xdialog window. The techniques used here are useful if you want to design dialog boxes that take advantage of HTML's layout features, but still have the power of Xbasic to respond to events on the HTML page.

A working version of this script can be found in the sample 'Learning Xdialog' database. (See ActiveX,Html).

The non-essential parts of the script are in green. Take these out and you have a simple dialog that responds to the event1 and close events. 

dim dlg_title as C
dim htmlObj as P
dim htmlObj.object as P
dim htmlObj.class as C
dim htmlObj.events as C
dim htmlObj_html as C
dim html_text as C
dlg_title = "Xbasic Event Handler for JavaScript Events"

Define the HTML to be shown in the Xdialog window. First, the style definitions.

html_text = <<%html%
<html>
<style type="text/css">
<!--
body{font: 10pt tahoma;}
a.a_menu_off, a.a_menu_off:active, a.a_menu_off:visited{font: 10pt tahoma;text-decoration: underline;}
a.a_menu_off:hover{font: 10pt tahoma;text-decoration: underline;}
a.a_menu_on, a.a_menu_on:active, a.a_menu_on:visited{font: 10pt tahoma;text-decoration: underline;}
a.a_menu_on:hover{font: 10pt tahoma;text-decoration: underline;}
a, a:active, a:visited{font: 10pt tahoma;text-decoration: underline;}
a:hover{font: 10pt tahoma;text-decoration: underline;}
-->
</style>

JavaScript variables and functions that provide services to connect the JavaScript and Xbasic environments. This is the code appropriate to Version 6.

<script type="text/javascript" language="javascript">
<!--
var oj = new ActiveXObject(" a5contexteval.contexteval ");
function CallXbasic(expr) {return oj.eval(ContextID_Placeholder,expr);}
function click1(url) {argument = 'Evaluate_Button("' +url + '",local_variables())';CallXbasic(argument); }

This is the code appropriate to Version 7.

<script type="text/javascript" language="javascript">
<!--
var oj = new ActiveXObject(" a5contexteval.contexteval.7 ");
function CallXbasic(expr) {return oj.eval(ContextID_Placeholder,expr);}
function click1(url) {argument = 'Evaluate_Button("' +url + '",local_variables())';CallXbasic(argument); }

Then a JavaScript function to hide and display text on the page.

function hide_show_by_id(tar_id){ 
      if(document.all){ 
          if(document.all.item(tar_id).style.display == 'none'){ 
              document.all.item(tar_id).style.display = 'block'; 
              document.all.item(tar_id+'_atag').className = 'a_menu_on'; 
          } 
          else{ 
              document.all.item(tar_id).style.display = 'none'; 
              document.all.item(tar_id+'_atag').className = 'a_menu_off'; 
         } 
      } 
      else if(document.getElementById){ 
          if(document.getElementById(tar_id).style.display == 'none'){ 
              document.getElementById(tar_id).style.display = 'block'; 
              document.getElementById(tar_id+'_atag').className = 'a_menu_on'; 
          } 
          else{ 
              document.getElementById(tar_id).style.display = 'none'; 
              document.getElementById(tar_id+'_atag').className = 'a_menu_off'; 
          } 
      } 
 } 
 //--> 
 </script>

Next, the HTML page content.

<body>
<h5>This application demonstrates how you can respond to events on an HTML page with Xbasic event handlers. It also demonstrates how to show and hide sections of the HTML page.</h5>
<br>
<h6>Click the link or button - an Xbasic event handler will run.</h6>

Note the simple syntax to fire an event.

<a href="" onclick='click1("event1"); return false;'>Click Me - This will fire 'Event1'</a><br>

Note, the simple syntax to fire an event.

<input type="button" value="Event 2" onclick='click1("event2"); return false;'><br>
<br>
<h6>Click the headings. The page will expand to reveal additional text.</h6>
<a href="#" id="div1_atag" onclick="hide_show_by_id('div1'); return false" class="a_menu_off">Click here to show/hide Conditional Text - Paragraph 1.</a><br/>
<div id="div1" class="data_div" style="display: none">
This is the conditional text for Paragraph 1. It is only revealed when the user clicks on the link.<br>
</div>
<a href="#" id="div2_atag" onclick="hide_show_by_id('div2'); return false" class="a_menu_off">Click here to show/hide Conditional Text - Paragraph 2.</a><br/>
<div id="div2" class="data_div" style="display: none">
This is the conditional text for Paragraph 2. It is only revealed when the user clicks on the link.<br>
</div>
<br>
<br>
<a href="" onclick='click1("close")'>CLOSE WINDOW</a><br>
</BODY>
</HTML>
%html%

The Xbasic section starts with code to connect the JavaScript events to the Alpha Anywhere environment.

dim contextId as C
'Generate a unique ContextId for this script. The actual value of the contextId is meaningless.
'However, if multiple Xdialog windows are open simultaneously, then each must have a unique contextID
contextId = "ContextID" + remspecial("" + date()+ time()+ rand()* 1000)
Xbasic_eval_context_add(contextId)
'replace the ContextId_Placeholder in the HTML with a real contextID
html_text = stritran(html_text,"ContextID_Placeholder",quote(contextId))
htmlObj.class="dhtmledit.dhtmledit"
'This creates an object that references the A5ContextEval COM component. This allows JavaScript to invoke Xbasic
dim o as ole::a5contexteval.contexteval
ole.class="dhtmledit.dhtmledit"
o.Attach(*Xbasic_eval_context_attach())

Next comes the Xdialog code that displays the HTML page.

ui_modeless_dlg_box(dlg_title, <<%dlg%
{can_exit=close}
{startup=init}
{activex=150,25htmlObj};
%dlg%, <<%code%

These are the event handlers.

if a_dlg_button = "init"
     htmlObj.object.ActivateActiveXControls = .T.
     htmlObj.object.browsemode = .t.
     htmlObj.object.appearance = 0
     htmlObj.object.ScrollBars = .t.
     htmlObj.object.documenthtml = html_text
 end if
 if a_dlg_button = "event1" then
     'this is the event handler for the JavaScript event when the user clicks on the link in the HTML
     a_dlg_button = ""
     ui_msg_box("Notice","User clicked link for event 1. This is an Xbasic script that has responded to the click on the HTML page.")
     htmlObj.object.Refresh()
 end if
 if a_dlg_button = "event2" then
      'this is the event handler for the JavaScript event when the user clicks on the button in the HTML
      a_dlg_button = ""
      ui_msg_box("Notice","User clicked button for event 2. This is an Xbasic script that has responded to the click on the HTML page.")
      htmlObj.object.Refresh()
 end if
 if a_dlg_button = "close" then
     'this is the event handler for the JavaScript event when the user clicks on the 'Close Window' link in the HTML
 ui_modeless_dlg_close(dlg_title)
 end if
 %code%)

This function is not required, but it proves that event1 has fired.

FUNCTION Evaluate_Button as V ( arg as C, vars as P )
    'DESCRIPTION: Javascript/Xbasic event handler
    WITH vars
        ui_dlg_event(dlg_title, arg, .T.)
    END WITH
END FUNCTION

Limitations

Desktop applications only

See Also